<template>
    <div>
        {{ newName }}
        {{ newName }}
        {{ newName }}
        {{ newName }}
        <div v-for="item in list" :key="item.id">
            {{ item.price | newPriceFil }}
        </div>
        <div>总价格:{{ newPrice | newPriceFil }}</div>

        <!-- v-if 根据条件去创造节点 -->
        <!-- 常用于不频繁切换的时候 -->
        <div v-if="num >= 90">优秀</div>
        <div v-else-if="num >= 60">良好</div>
        <div v-else>差</div>

        <!-- v-show 一开始就把节点加载出来 通过css的display去控制它是否显示 -->
        <!-- 不用去频繁的删除和创造节点 -->
        <!-- 频繁切换的时候使用它 -->
        <div v-show="num >= 95">非常优秀</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '王',
            lastName: '发发',
            list: [
                {
                    id: 1,
                    book: '三国演义',
                    price: 150
                },
                {
                    id: 2,
                    book: '红楼梦',
                    price: 170
                },
                {
                    id: 3,
                    book: '西游记',
                    price: 180
                },
                {
                    id: 4,
                    book: '水浒传',
                    price: 190
                }
            ],
            num: 95
        };
    },
    // 计算属性是一个变量，它不是个方法 它无法传参
    // 优点，如果数据没有改变 它只运行一次（前端性能优化的范畴）
    computed: {
        newName() {
            return this.firstName + this.lastName;
        },
        newPrice() {
            let allPrice = null;
            for (let i = 0; i < this.list.length; i++) {
                allPrice += this.list[i].price;
            }
            return allPrice;
        }
    },
    // 过滤器是有形参的 用法{{ 要传来的值 ｜ 要使用的过滤器 }}
    filters: {
        newPriceFil(val) {
            return '¥' + val.toFixed(2);
        }
    },
    // function 只要你用一次，我就会执行一次
    methods: {
        // newName(){
        //     console.log(111)
        //     return this.firstName + this.lastName
        // },
    }
};
</script>

<style></style>
